<%--
  Created by IntelliJ IDEA.
  User: zhang_yao_wu1993
  Date: 15/4/21
  Time: 下午4:34
--%>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="/Other/Lib/jquery-2.1.3.js"></script>
    <script type="text/javascript" src="/Other/Lib/ParticleGround/jquery.particleground.min.js"></script>
    <link rel="stylesheet" href="/Other/Lib/ParticleGround/jquery.particleground.css"/>
    <script type="text/javascript" src="/Other/Lib/SemanticUI/dist/semantic.min.js"></script>
    <link rel="stylesheet" href="/Other/Lib/SemanticUI/dist/components/form.min.css"/>
    <link rel="stylesheet" href="/Other/Lib/SemanticUI/dist/components/button.min.css"/>
    <link rel="stylesheet" href="/Other/Lib/SemanticUI/dist/components/input.min.css"/>
    <link rel="stylesheet" href="/Other/Lib/SemanticUI/dist/components/segment.min.css"/>
    <link rel="stylesheet" href="/Other/Lib/SemanticUI/dist/components/icon.min.css"/>
    <link rel="stylesheet" href="/Other/Lib/SemanticUI/dist/components/label.min.css"/>
    <link rel="stylesheet" href="/Other/Lib/SemanticUI/dist/components/statistic.min.css"/>
    <link rel="stylesheet" href="/Other/Lib/SemanticUI/dist/components/checkbox.min.css"/>

    <script type="text/javascript" src="/Other/JavaScript/blog_Login.js"></script>
    <link rel="stylesheet" href="/Other/StyleSheet/blog_Login.css"/>
</head>
<body>
<div id="particles">
    <%-- magic_num --%>
    <div id="magic_num" class="ui statistics">
        <div class="yellow statistic">
            <div class="value">
                2
            </div>
            <div class="label">
                Yellow Labradors
            </div>
        </div>
        <div class="pink statistic">
            <div class="value">
                123
            </div>
            <div class="label">
                Pink Labradors
            </div>
        </div>
        <div class="blue statistic">
            <div class="value">
                283
            </div>
            <div class="label">
                Blue Shiba-Inus
            </div>
        </div>
        <div class="orange statistic">
            <div class="value">
                141
            </div>
            <div class="label">
                Orange Chihuahuas
            </div>
        </div>
        <div class="purple statistic">
            <div class="value">
                821
            </div>
            <div class="label">
                Purple Labradoodles
            </div>
        </div>
    </div>
    <%-- end magic_num --%>
    <%-- login_box --%>
    <div id="login_box" class="ui large form segment">
        <form action="/j_login" method="post">
            <div class="ui vertical segment">
                <div class="ui left icon input labeled">
                    <input type="text" placeholder="请输入用户名 ..." maxlength="21" name="j_username">
                    <i class="user icon"></i>

                    <div class="ui tag label">
                        <i class="terminal icon"></i>
                    </div>
                </div>
            </div>
            <div class="ui vertical segment">
                <div class="ui left icon input labeled">
                    <input type="password" placeholder="请输入密码 ..." maxlength="21" name="j_password">
                    <i class="unlock alternate icon"></i>

                    <div class="ui tag label">
                        <i class="terminal icon"></i>
                    </div>
                </div>
            </div>
            <div class="ui vertical segment">
                <div class="ui toggle checkbox">
                    <input type="checkbox" name="j_remember_me" value="true">
                    <label style="margin-top: 4px">记住我</label>
                </div>
            </div>
            <input type="hidden"
                   name="${_csrf.parameterName}"
                   value="${_csrf.token}"/>

            <div class="ui vertical segment">
                <div id="submit_button" class="ui basic button">
                    <i class="angle double right icon"></i>
                    登陆
                </div>
                <a href="/MainPage">
                    <div class="ui basic button">
                        <i class="home icon"></i>
                        返回首页
                    </div>
                </a>
            </div>
        </form>
    </div>
    <%-- end login_box --%>
</div>
</body>
</html>